<template>
  <div>
    <x-collapse expand :title="t['私有配置']">
      <a-space direction="vertical" fill>
        <a-textarea
          v-model="src"
          :auto-size="false"
          allow-clear
          placeholder="Image Src"
          class="w-full"
          @keydown.enter="setSrc"
        ></a-textarea>
        <div class="justify-between flex">
          <div class="text-gray-500 text-[12px]">{{ t["抖动"] }}</div>
          <a-switch
            v-model="currentShape.keep"
            :checked-text="t['原图']"
            :unchecked-text="t['抖动']"
            @change="setImageIsDithered"
          ></a-switch>
          <!-- <a-radio-group v-model="isDithered" @change="setImageIsDithered">
            <a-radio :value="false">
              <span class="text-[12px] text-gray-500">{{ t["原图"] }}</span>
            </a-radio>
            <a-radio :value="true">
              <span class="text-[12px] text-gray-500">{{ t["抖动"] }}</span>
            </a-radio>
          </a-radio-group> -->
        </div>
        <div class="justify-between flex items-center">
          <div class="text-gray-500 text-[12px]">{{ t["删除图片"] }}</div>
          <a-button @click="deleteImage">
            <icon-delete />
          </a-button>
        </div>
      </a-space>
    </x-collapse>
  </div>
</template>

<script setup lang="ts">
import { dithered } from "@/api/service/utils";
import { currentShape } from "@/views/paint/modules/data/shapes";
import { stageConfig } from "@/views/paint/modules/data/stage";

const src = ref();
const t = translate("公共模块");
/**
 * 注释: 确定
 *
 * */
const setSrc = () => {
  currentShape.value.src = src.value;
  currentShape.value.cacheSrc = src.value;
};
/**
 * 注释: 设置黑白抖动
 *
 * */
const setImageIsDithered = async () => {
  if (currentShape.value.keep) {
    const image = await dithered({
      color: stageConfig.value.deviceColor,
      height: currentShape.value.h,
      width: currentShape.value.w,
      str: currentShape.value.src
    });
    currentShape.value.cacheSrc = image.data;
  } else {
    currentShape.value.cacheSrc = currentShape.value.src;
  }
};

const deleteImage = () => {
  currentShape.value.cacheSrc = "";
  currentShape.value.rotate = 0;
};
</script>

<style lang="scss" scoped>
textarea {
  width: 100%;
  resize: none;
  height: 100px;
  border: 1px solid #eee;
  border-radius: 6px;
}
</style>
